﻿@{
    ViewData["Title"] = "RoomTypeGrouoby";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<style>
    .container .inline-block-item {
        display: inline-block;
        /* 设置宽度、高度、间距等样式 */
        width: 200px; /* 示例宽度 */
        height: 100px; /* 示例高度 */
        /*  line-height: 0px; /* 垂直居中文字 */ */ text-align: center; /* 文本居中 */
        margin-right: 10px; /* 右侧间距 */
        background-color: #009688; /* 示例背景色 */
        color: #fff; /* 文本颜色 */
        border-radius: 5px;
    }

        /* 最后一个div不需要间距时，可以添加一个类来去除 */
        .container .inline-block-item:last-child {
            margin-right: 0;
        }
</style>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui 分组显示数据示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css">
</head>

<body>
  
    <div class="layui-row">
        <div class="layui-col-sm3">
      
    </div>
       <div class="layui-col-sm3">
            <div>
                <span>预定状态:</span>
                <span style="color:#ff5722" class="status">在住</span> &ensp;
                <span style="color:#ffb800" class="status">保留</span> &ensp;
                <span style="color:#16baaa" class="status">预定</span> &ensp;
                <span style="color:#1e9fff" class="status">空房</span><br />
                <span>房间状态:</span>
                <span style="color:#a233c6" class="status">净房</span>&ensp;
                <span style="color:#2f363c" class="status">脏房</span>&ensp;
                <span style="color:#c2c2c2" class="status">维修</span>
            </div>
           ----------------------------------------------------------
            <div class="grid-demo">
                <div style="width:650px;" id="roomTypeGroup">
                    <div style="margin-bottom: 10px"><span style="font-size:20px; "> 基础 </span></div>
                    <div class="container">
                        <div id="roomdiv" class="inline-block-item" style=" font-size:20px;">
                            <table>
                                <tr>
                                    <td><label data-value="1" style="margin-top:10px;">103</label></td>
                                    <td style="padding-left:100px">
                                        <a class="layui-btn layui-btn-xs" lay-event="more">
                                            更多
                                            <i class="layui-icon layui-icon-down"></i>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

<div id="retain" style="display:none">
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围</label>
                    <div class="layui-inline" id="ID-laydate-range">
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">房型名称</label>
                <div class="layui-input-block" style="width:20%;height:5%">
                    <select id="roomIdas" name="roomIdas" lay-filter="roomIdas" lay-search="required">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">房号名称</label>
                <div class="layui-input-block" style="width:20%;height:5%">
                    <select id="roomIds" name="roomIds" lay-filter="roomIds" lay-search="required">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">

                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="roomDesc" id="roomDesc" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    <button class="layui-btn" type="button" lay-submit lay-filter="submitForm">保留</button>
                </div>
            </div>
    </form>
</div>




    <script>
        layui.use(['table', 'jquery', 'layer', 'dropdown', 'form', 'laypage', 'element','laydate'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            var laypage = layui.laypage;
            var element = layui.element;
            var dropdown = layui.dropdown;
            var util = layui.util;
            var div = document.getElementById('roomdiv');
            // util.on('lay-on', {
            //     'test-tips-bottom': function () {
            //         layer.tips('向下', this, {
            //             tips: [1,"#ffffff"],
            //             content:"",
            //         });
            //     },
            // })
            var laydate = layui.laydate;
            // 日期范围 - 左右面板独立选择模式
            laydate.render({
                elem: '#ID-laydate-range',
                range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
            });
            var roomtypeid = "";
            var roomid = "";
            //修改房间状态
            $.ajax({
                url: 'http://localhost:5174/api/RoomType/GetRoomasNumber',
                type: 'GET',
                success: function (response) {
                    console.log(response)
                    var content = "";
                    var userData = response.data;
                    $.each(response.data, function (index, item) {
                        var backgroundColor = "";
                        var name = "";
                        content += '<div style="margin-bottom: 10px" ><span style="font-size:20px; "> ' + item.roomName + ' </span></div>';
                        content += '<div class="container">';
                        $.each(item.roomNumber, function (index, item1) {
                            if (item1.checkInState == 1) {
                                //在住
                                backgroundColor = "#ff5722";
                            }
                            if (item1.checkInState == 2) {
                                //保留
                                backgroundColor = "#ffb800 ";
                            }
                            if (item1.checkInState == 3) {

                                //预定
                                backgroundColor = "#16baaa";
                            }
                            if (item1.checkInState == 0) {

                                //空房
                                backgroundColor = "#1e9fff";
                            }
                            if (item1.roomState == 1) {

                                //净房
                                name = "净房";
                            }
                            if (item1.roomState == 2) {

                                //脏房
                                name = "脏房";

                            }
                            if (item1.roomState == 3) {

                                //维修
                                name = "维修";

                            }
                            content += ` <div class="inline-block-item" style=" font-size:20px;background:${backgroundColor};">
                                                <table>
                                                    <tr>
                                                                  <td><span style="display:none" data-value="${item.roomId}"></span></td>
                                                         <td><label data-value="${item1.numberId}" style="margin-top:10px;">${item1.roomNumber} ${name}</label> </td>
                                                        <td style="padding-left:100px">
                                                            <a class="layui-btn layui-btn-xs" lay-event="more">
                                                                更多
                                                                <i class="layui-icon layui-icon-down"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>`
                        })
                        $("#roomTypeGroup").html(content)
                    })
                    // 使用事件委托绑定点击事件
                    $('#roomTypeGroup').on('click', 'a[lay-event="more"]', function (e) {
                        e.preventDefault(); // 阻止a标签的默认跳转行为


                        // 获取当前点击的a标签的lay-event属性值
                        var layEvent = $(this).attr('lay-event');

                        // 找到当前点击的a标签所在的tr
                        var $tr = $(this).closest('tr');

                        // 在该tr中找到label标签，并获取其data-value属性的值

                        var labelValue = $tr.find('label').data('value'); // 注意：如果tr中有多个label，这将只获取第一个的值
                        roomid = labelValue;
                        var roomtypeid = $tr.find('span').data('value');
                        // 现在你可以使用labelValue变量了
                        console.log(labelValue); // 输出：对应的房号ID

                        // 根据layEvent的值执行不同的操作
                        if (layEvent === 'more') {
                            // 执行"更多"操作
                            // 更多 - 下拉菜单
                            dropdown.render({
                                elem: this, // 触发事件的 DOM 对象
                                show: true, // 外部事件触发即显示
                                data: [{
                                    title: '办理入住',
                                    id: 'checkout'
                                }, {
                                    title: '办理预定',
                                    id: 'schedule'
                                }, {
                                    title: '设置脏房',
                                    id: 'dirty'
                                }, {
                                    title: '设置净房',
                                    id: 'roomonly'
                                }, {
                                    title: '设置维修',
                                    id: 'service'
                                }, {
                                    title: '设置保留',
                                    id: 'reserve'
                                }],
                                click: function (menudata) {
                                    //办理入住
                                    if (menudata.id === 'checkout') {
                                        layer.msg('办理入住操作，房号ID：' + labelValue);
                                       
                                    }
                                    //办理预定
                                    else if (menudata.id === 'schedule') {
                                        layer.msg('办理预定操作，房号ID：' + labelValue + "房型ID" + roomtypeid);

                                    window.location.href = 'RoomTypeOrder?roomTypeId=' + roomtypeid + '&labelValue=' + labelValue;
                                    }
                                    //设置脏房
                                    else if (menudata.id === 'dirty') {
                                        layer.msg('设置脏房操作，房号ID：' + labelValue);
                                        $.ajax({
                                            url: 'http://localhost:5174/api/RoomType/UpdateRoomStsatueDIrty',
                                            type: 'get',
                                            data: ({ id: labelValue }),
                                            headers: {
                                                "Authorization": "Bearer " + localStorage.getItem('token')
                                            },
                                            success: function (res) {
                                                if (res.code > 0) {
                                                    layer.msg("设置为脏房");

                                                }

                                                // 删除成功后的操作
                                            }
                                        });
                                    }
                                    //净房
                                    else if (menudata.id === 'roomonly') {
                                        layer.msg('设置净房操作，房号ID：' + labelValue);
                                        $.ajax({
                                            url: 'http://localhost:5174/api/RoomType/UpdateRoomStsatueClearn',
                                            type: 'get',
                                            data: ({ id: labelValue }),
                                            headers: {
                                                "Authorization": "Bearer " + localStorage.getItem('token')
                                            },
                                            success: function (res) {
                                                if (res.code > 0) {
                                                    layer.msg("设置为净房");


                                                }

                                                // 删除成功后的操作
                                            }
                                        });
                                    }
                                    //维修
                                    else if (menudata.id === 'service') {
                                        layer.msg('设置维修操作，房号ID：' + labelValue);
                                        $.ajax({
                                            url: 'http://localhost:5174/api/RoomType/UpdateRoomStsatueRepair',
                                            type: 'get',
                                            data: ({ id: labelValue }),
                                            headers: {
                                                "Authorization": "Bearer " + localStorage.getItem('token')
                                            },
                                            success: function (res) {
                                                if (res.code > 0) {
                                                    layer.msg("设置为维修");


                                                }

                                                // 删除成功后的操作
                                            }
                                        });
                                    }
                                    //保留
                                    else if (menudata.id === 'reserve') {
                                        layer.msg('设置保留操作，房号ID：' + labelValue + "房型ID" + roomtypeid);
                                        getRoomType();
                                        $("#roomIdas").val(labelValue);
                                        $.ajax({
                                            url: 'http://localhost:5174/api/RoomType/ByroomIdGetRoomNumber',
                                            type: 'GET',
                                            dataType: 'json',
                                            data: ({ id: roomtypeid }),
                                            success: function (response) {
                                                var form = layui.form;
                                                form.render('select');
                                                var select = $('#roomIds');

                                                // 首先添加"请选择"选项到下拉框的开头
                                                select.prepend($('<option>', {
                                                    value: '',  // 可根据实际情况设置值
                                                    text: '请选择'
                                                }));
                                                select.find('option').not(':first').remove(); // 清空原有的除"请选择"外的选项
                                                $.each(response.data, function (index, item) {
                                                    select.append($('<option>', {
                                                        value: item.numberId,
                                                        text: item.roomNumber
                                                    }));
                                                });
                                                form.render('select'); // 重新渲染

                                            },
                                            error: function (error) {
                                                console.error('请求失败：', error);
                                            }
                                        });
                                        $("#roomIds").val(roomtypeid);

                                        layer.open({
                                            type: 1,
                                            area: ['630px', '360px'],
                                            shade: false, // 不显示遮罩
                                            content: $('#retain'), // 捕获的元素
                                            end: function (iayero, index) {
                                                // layer.msg('关闭后的回调', {icon:6});

                                            }
                                        });
                                    }
                                },
                                align: 'right', // 右对齐弹出
                                style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
                            })
                            // 这里可以编写你的逻辑代码
                        }
                        // 可以继续添加更多的if-else来处理不同的lay-event值
                    });
                },

                error: function (error) {
                    console.error('获取数据时出错:', error);
                }
            });

            //一级联动（房型）
            function getRoomType() {
                $.ajax({
                    url: 'http://localhost:5174/api/RoomType/GetAllRoom',
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        var form = layui.form;
                        form.render('select');
                        var select = $('#roomIdas');

                        // 首先添加"请选择"选项到下拉框的开头
                        select.prepend($('<option>', {
                            value: '',  // 可根据实际情况设置值
                            text: '请选择'
                        }));
                        select.find('option').not(':first').remove(); // 清空原有的除"请选择"外的选项
                        $.each(response.data, function (index, item) {
                            select.append($('<option>', {
                                value: item.roomId,
                                text: item.roomName
                            }));
                        });
                        form.render('select'); // 重新渲染

                    },
                    error: function (error) {
                        console.error('请求失败：', error);
                    }
                });
            }
           
            getRoomType()
            getRoomNumber()
            //二级联动（房号）
            function getRoomNumber() {
                console.log("显示房型对应房号" + roomtypeid);
                $.ajax({
                    url: 'http://localhost:5174/api/RoomType/ByroomIdGetRoomNumber',
                    type: 'GET',
                    dataType: 'json',
                    data: ({ id: 7 }),
                    success: function (response) {
                        var form = layui.form;
                        form.render('select');
                        var select = $('#roomIds');

                        // 首先添加"请选择"选项到下拉框的开头
                        select.prepend($('<option>', {
                            value: '',  // 可根据实际情况设置值
                            text: '请选择'
                        }));
                        select.find('option').not(':first').remove(); // 清空原有的除"请选择"外的选项
                        $.each(response.data, function (index, item) {
                            select.append($('<option>', {
                                value: item.numberId,
                                text: item.roomNumber
                            }));
                        });
                        form.render('select'); // 重新渲染

                    },
                    error: function (error) {
                        console.error('请求失败：', error);
                    }
                });
            }


            // 点击事件处理
            $('.status').click(function () {
                var statusText = $(this).text().trim(); // 获取点击的状态文本

                // 根据点击的状态文本显示对应的 div
                switch (statusText) {
                    case '保留':
                        $('.inline-block-item').hide(); // 隐藏所有的 .inline-block-item
                        $('.inline-block-item').filter(function () {
                            return $(this).css('background-color') === 'rgb(255, 184, 0)';
                        }).show(); // 显示保留状态对应的 div
                        break;
                    case '预定':
                        $('.inline-block-item').hide();
                        $('.inline-block-item').filter(function () {
                            return $(this).css('background-color') === 'rgb(22, 186, 170)';
                        }).show(); // 显示预定状态对应的 div
                        break;
                    case '空房':
                        $('.inline-block-item').hide();
                        $('.inline-block-item').filter(function () {
                            return $(this).css('background-color') === 'rgb(30, 159, 255)';
                        }).show(); // 显示空房状态对应的 div
                        break;
                    case '净房':
                        $('.inline-block-item').hide();
                        $('.inline-block-item').filter(function () {
                            return $(this).find('label').text().includes('净房');
                        }).show(); // 显示净房状态对应的 div
                        break;
                    case '脏房':
                        $('.inline-block-item').hide();
                        $('.inline-block-item').filter(function () {
                            return $(this).find('label').text().includes('脏房');
                        }).show(); // 显示脏房状态对应的 div
                        break;
                    case '维修':
                        $('.inline-block-item').hide();
                        $('.inline-block-item').filter(function () {
                            return $(this).find('label').text().includes('维修');
                        }).show(); // 显示维修状态对应的 div
                        break;
                    default:
                        // 默认隐藏所有 div
                        $('.inline-block-item').hide();
                        break;
                }
            });

            //设置保留
            form.on('submit(submitForm)', function (data) {

                $.ajax({
                    url: 'http://localhost:5174/api/RoomType/UpdateRoomStatueretain',
                    type: 'get',
                    dataType: 'json',
                    data: ({ id: roomid }),
                    success: function (res) {
                        // 添加成功后的操作
                        if (res.code > 0) {
                            layer.msg("保留成功");

                        }
                    }
                });
                return false;
            });
        })
    </script>

</body>
</html>